<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
  <title>我的公会</title>
  <link rel="stylesheet" href="/mobile/css/index.css" />
  <script src="/mobile/js/vue.js"></script>
  <script src="/mobile/js/vue-infinite-scroll.js"></script>
  <script src="/mobile/js/axios.min.js"></script>
  <script src="/mobile/js/vant.min.js"></script>
  <script src="/mobile/js/crypto-js.js"></script>
  <script src="/mobile/js/aes.js"></script>
  <script src="/mobile/js/common.js"></script>
  <style>
  * {
    margin: 0;
    padding: 0;
    -webkit-user-select: none;
    /* Safari */
    -moz-user-select: none;
    /* Firefox */
    -ms-user-select: none;
    /* IE10+/Edge */
    user-select: none;
    /* Standard syntax */
    list-style: none;
  }

  #app {
    padding: 10px;
    background: #05071D;
    min-height: 100vh;
    box-sizing: border-box;
/*    background-image: url("/mobile/img/top_bg.jpg");*/
    background-repeat: no-repeat;
    background-position: top center;
    background-size: contain;
  }

  .guild-item {
    background: #fff;
    padding: 10px;
    display: flex;
    border-radius: 10px;
  }

  .guild-info {
    margin-left: 15px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
  }

  .guild-icon {
    width: 80px;
    height: 80px;
    border-radius: 5px;
    object-fit: cover;
  }

  .guild-name {
    font-size: 14px;
    font-weight: bold;
  }

  .guild-desc {
    font-size: 12px;
    color: #A9ABCA;
    margin-top: 10px;
  }

  .guild-member {
    font-size: 12px;
    color: #A9ABCA;
  }

  .pretty-id {
    display: inline-block;
    background: #ff0000;
    color: #fff;
    font-size: 12px;
    padding: 0 2px;
    margin-right: 5px;
  }

  .btn {
    width: 100%;
  }

  .guild-box {
    margin-top: 10px;
    border-radius: 10px;
    overflow: hidden;
  }
  .avatar {
    display: inline-block;
    margin-right: 5px;
  }
  .user .van-cell__label {
    max-height: 200px;
    overflow-y: auto;
  }

  </style>
</head>

<body>
  <div id="app">
    <div class="guild-item">
      <img class="guild-icon" :src="badge +'?x-oss-process=image/resize,h_160,m_fill/format,jpg'" alt="">
      <div class="guild-info">
        <div class="guild-name">{{name}}</div>
        <div class="guild-desc"><span class="pretty-id">靓</span>{{goodNum}}</div>
        <div class="guild-member">公会长：{{userNickname}}</div>
      </div>
    </div>
    <div class="guild-box">
      <van-cell v-if="identity === 0" title="公会长提成" :value="divideFamily + '%'"></van-cell>
      <van-cell title="公会简介" :label="briefing"></van-cell>
      <van-cell class="user" :is-link="identity === 0" :url="identity === 0 ? `./members.html?id=${id}&token=${token}` : ''">
        <template #title>
          {{users.length ? '公会成员(' + users.length + ')' : '公会成员'}}
        </template>
        <template #label>
          <van-image class="avatar" v-for="(item, index) in users" :key="index" round width="50px" height="50px" :src="item.avatar +'?x-oss-process=image/resize,h_120,m_fill'" fit="cover"></van-image>
        </template>
      </van-cell>
      <van-cell title="流水统计" is-link :url="`./analysis.html?identity=${identity}&token=${token}`"></van-cell>
      <template v-if="identity === 0 || identity === 2">
        <van-cell title="签约审核" is-link :url="`./inOutAudit.html?type=0&token=${token}`"></van-cell>
      </template>
      <template v-if="identity === 0">
        <van-cell title="解约审核" is-link :url="`./inOutAudit.html?type=1&token=${token}`"></van-cell>
        <van-cell title="签约说明" is-link :url="`./content.html?id=${id}&name=${name}&token=${token}&edit=1`"></van-cell>
        <van-cell title="公会房间" is-link :url="`./room.html?token=${token}`"></van-cell>
      </template>
    </div>
    <div style="margin: 16px;" v-if="identity === 1 || identity === 2">
      <van-button class="btn" color="linear-gradient(270deg, #9358F4 0%, #6E53F3 100%)" round @click="exitGuild" :loading="loading" loading-text="退出中...">退出公会</van-button>
    </div>
  </div>
  <script>
  new Vue({
    el: '#app',
    data: {
      loading: false,
      id: null,
      token: '',
      name: '',
      goodNum: '',
      briefing: '',
      badge: '',
      userNickname: '',
      divideFamily: '',
      identity: null,
      users: [],
      checked: false,
    },
    created() {
      const parse = (queryStr) => {
        const str = queryStr.replace(/^\?/, '')
        return str.split('&').reduce((pre, key) => {
          const [k, v] = key.split('=')
          pre[decodeURIComponent(k)] = decodeURIComponent(v)
          return pre
        }, {})
      }
      var data = parse(location.search)
      if (data.id && data.token) {
        this.id = data.id
        this.token = data.token
        this.getData()
      }
    },
    methods: {
      getData() {
        var query = `id=${this.id}`
        var str = ISCRYPT ? `args=${encrypt(query)}` : query
        request.get(`/api/business/app/family/getInfo?${str}`).then(res => {
          console.log(res)
          this.name = res.data.name
          this.briefing = res.data.briefing
          this.badge = res.data.badge
          this.goodNum = res.data.goodNum
          this.userNickname = res.data.userNickname
          this.users = res.data.users
          this.identity = res.data.identity
          this.divideFamily = res.data.divideFamily
        })
      },
      exitGuild() {
        this.$dialog.alert({
          message: '退出公会需要公会长审核，确定要退出吗？',
          showCancelButton: true
        }).then(() => {
          request.get('/api/business/app/family/quitFamily').then(res => {
            this.loading = false
            console.log(res)
            var that = this
            this.$toast({
              message: '提交成功',
              duration: 1500,
              onClose() {
                location.replace(`./audit.html?state=6&token=${that.token}`)
              }
            })
          }).finally(() => {
            this.loading = false
          })
        }).catch(() => {
          // 点击取消
        })
      }
    }
  })
  </script>
</body>

</html>